<template>
  <a-card class="menu-block">
    <header class="block-title">
      <div class="title-block">
        <div class="main-title">
          <AppstoreAddOutlined style="margin-right: 20px" />多源融合反演监测
        </div>
      </div>
    </header>
    <div class="content-block">
      <div
        class="content-item"
        :class="menukey == item.category2 ? 'content-item-hover' : ''"
        v-for="(item, index) in MergeList"
        :key="index"
        @click="viewCategory1(item)"
      >
        <div class="data-block">
          <div class="title-text">
            <div style="float: left">{{ item.title }}</div>
            <div style="float: right"> <RightOutlined /></div>
          </div>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
  import { AppstoreAddOutlined, RightOutlined } from '@ant-design/icons-vue';
  import { ref, onMounted, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { MergeList } from './data';
  import { ProductCategory1Enum, ProductCategory2Type } from '/@/util/product-type';

  const router = useRouter();
  const menukey = ref('');
  const props = defineProps({
    routePath: String,
  });

  const mergeTypeKey = ProductCategory1Enum.MERGE;

  function viewCategory1(item: ProductCategory2Type) {
    if (item.label === '沙尘天气过程评估') {
      router.push({
        path: '/merge/scgcpg',
      });
      return;
    }
    if (props.routePath === 'home') {
      if (menukey.value !== '') {
        if (menukey.value === item.category2) {
          menukey.value = '';
          router.push({
            path: props.routePath,
            query: { category1: mergeTypeKey },
          });
          return;
        }
      }
      menukey.value = item.category2 || '';
      router.push({
        path: props.routePath,
        query: { category1: mergeTypeKey, category2: item.category2 },
      });
    } else {
      menukey.value = item.category2 || '';
      router.push({
        path: props.routePath,
        query: { category1: mergeTypeKey, category2: item.category2, itemKey: item.defaultItemKey },
      });
    }
  }

  onMounted(() => {});

  watch(
    () => router.currentRoute.value,
    (curRoute) => {
      const category2: string = curRoute.query.category2 as string;
      if (category2) {
        menukey.value = category2;
      } else {
        menukey.value = '';
      }
    },
    { immediate: true },
  );
</script>

<style lang="less" scoped>
  .menu-block {
    height: 474px;
  }

  .content-item {
    display: flex;
    align-items: center;
    padding: 13px 5px;
    background: rgba(222, 235, 244, 0.5);
    border: 1px solid #deebf4;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.2s ease-in-out;
    &:hover {
      background: #0188e8;
      .data-block > .title-text,
      .text {
        color: #fff;
      }
    }
  }

  .content-item-hover {
    background: #0188e8;
    .data-block > .title-text,
    .text {
      color: #fff;
    }
  }

  .data-block {
    text-align: center;
    margin-right: 16px;
    width: 100%;
    .title-text {
      font-size: 17px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #0188e8;
      line-height: 17px;
    }
  }

  .text {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
    word-break: break-all;
  }

  .tag-item {
    margin-left: 8px;
  }
</style>
